<template>
  <!-- 出行事由 -->
  <div class="travel">
    <div>
      <PublicTop :index="5" />
    </div>
    <div class="flex">
      <dv-active-ring-chart
        :config="config"
        style="width: 2.3rem; height: 2.3rem"
      />
    </div>
    <div class="detail" @click="toDetail">出行事由详情</div>
  </div>
</template>

<script>
import PublicTop from "./../publicTop/index.vue";
import { getGetCarApplyReasonRank } from "@/api/dataV/index";
export default {
  name: "TravelView",
  components: { PublicTop },
  data() {
    return {
      config: {},
    };
  },
  mounted() {
    window.addEventListener("resize", this.resizeView);
    this.init();
  },
  methods: {
    init() {
      this.query();
      setInterval(() => this.query(), 10000);
    },
    resizeView() {
      setTimeout(() => this.query(), 500);
    },
    query() {
      getGetCarApplyReasonRank().then((res) => {
        const dataArr = res.map((v) => {
          return {
            name: v.name,
            value: v.value,
          };
        });
        const color = [
          "#74f0ff",
          "#fff",
          "#50E3C2",
          "#21262b",
          "#199633",
          "#74f0ff",
          "#fff",
          "#50E3C2",
          "#21262b",
          "#199633",
        ];
        this.config = {
          data: dataArr,
          color,
          digitalFlopStyle: {
            fontSize: 10 ,
          },
          lineWidth: 12,
          activeTimeGap: 2000,
        };
      });
    },
    toDetail() {
      this.$router.push({
        name: "detail",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.travel {
  height: 100%;
  // height: 3.8rem;
  background: url(@/assets/datav/itembg.png) no-repeat;
  .flex {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .detail {
    height: 0.3rem;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(30, 255, 255);
    font-weight: normal;
    font-family: "Microsoft Yahei", Arial, "sans-serif";
    font-size: 0.3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>
